<template>
	<view>
		<CouponListNavbarSwiper
			ref="navbarSwiper"
			:navbarList="navbarList" 
			:curNavbar="curNavbar" 
			:height="'88rpx'"
			:dateList="dateList"
			@handleChooseNavbar="handleChooseNavbar"
			@handleScrolltolower="handleScrolltolower"
			@handleRefresherrefresh="handleRefresherrefresh"
		>
		</CouponListNavbarSwiper>
		<view class="lingqu-btn column_align flex_center tp-fcF" @click="lingqu">
			<text class="tp-fz30">领取</text>
			<text class="tp-fz30 tp-mt10">更多</text>
		</view>
	</view>
</template>

<script>
	import CouponListNavbarSwiper from '@/components/user/coupon-navbarSwiper.vue'
	export default {
		components: {
			CouponListNavbarSwiper
		},
		data() {
			return {
				navbarList: [
					{name: '待使用',alias: 'toBeUsed'},
					{name: '已使用',alias: 'used'},
					{name: '已过期',alias: 'expire'},
				],
				curIndex: 0,
				curNavbar: {name: '待使用',alias: 'toBeUsed'},
				toBeUsedList: [],
				usedList: [],
				expireList: [],
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 10,
				},
			};
		},
		onLoad() {
			this.getCouponList()
		},
		computed: {
			dateList() {
				return [this.toBeUsedList, this.usedList, this.expireList]
			}
		},
		methods: {
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curIndex = i
				this.getCouponList()
			},
			handleScrolltolower(item, i) {
				let totalPage = Math.ceil(this.page.totalPageNum / this.page.pageSize)
				if (this.page.pageNum >= totalPage) return
				this.page.pageNum++
				this.getMoreCouponList()
			},
			handleRefresherrefresh(item, i) {
				this.page.pageNum = 1
				this.getCouponList()
			},
			// 领取优惠券
			lingqu(){
				uni.navigateTo({
					url: '/pagesTravel/couponList'
				});
			},
			getCouponList() {
				this.page.pageNum = 1
				this.$http.get(this.$api.mineCouponList,{status: this.curIndex,pageNum:this.page.pageNum,pageSize:this.page.pageSize}).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						this.$refs.navbarSwiper.stopPullDownRefresh()
						if (this.curIndex == 0) {
							this.toBeUsedList = res.data.result
						} else if (this.curIndex == 1) {
							this.usedList = res.data.result
						} else if (this.curIndex == 2) {
							this.expireList = res.data.result
						}
					}
				})
			},
			getMoreCouponList() {
				this.$http.get(this.$api.mineCouponList,{status: this.curIndex,pageNum:this.page.pageNum,pageSize:this.page.pageSize}).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						this.$refs.navbarSwiper.stopPullDownRefresh()
						if (this.curIndex == 0) {
							this.toBeUsedList = [...this.toBeUsedList, ...res.data.result]
						} else if (this.curIndex == 1) {
							this.usedList = [...this.usedList, ...res.data.result]
						} else if (this.curIndex == 2) {
							this.expireList = [...this.expireList, ...res.data.result]
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.lingqu-btn{
	position: fixed;
	right: 60rpx;
	bottom: 100rpx;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	background: #00B4FF;
	letter-spacing: 6rpx;
	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1)
}
</style>
